<template>
	<view>
		<up-popup :show="showPopup" :round="20" mode="bottom">
			<view class="popup-wrap" :style="{ height: height }">
				<view class="popup-btn-group flex">
					<view class="cancel" @click="close">取消</view>
					<view class="title">{{ title }}</view>
					<view class="confirm" @click="confirm">确认</view>
				</view>
				<scroll-view class="popup-list" scroll-y>
					<view :class="['popup-item', 'flex-jc']" @click="selectStore(index)" v-for="(item, index) in list"
						:key="index">
						<view>{{ item[pro.key] }}</view>
						<up-icon name="checkbox-mark" color="#986C5D" size="28" v-if="index === select"></up-icon>
					</view>
				</scroll-view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { postRequest } from "@/reuqest/request.js";
const props = defineProps({
	list: {
		type: Array,
		default: () => []
	},
	title: {
		type: String,
		default: "门店选择"
	},
	mode: {
		type: String,
		default: "bottom"
	},
	round: {
		type: Number,
		default: 20
	},
	height: {
		type: String,
		default: "60vh"
	},
	pro: {
		type: Object,
		default: () => ({ key: "label", value: "value" })
	},
	defaultValue: {
		type: String,
		default: ""
	}
});

const showPopup = ref(false);
const emit = defineEmits(["select"]);
const select = ref("");
const open = () => {
	showPopup.value = true;
};

const close = () => {
	showPopup.value = false;
};

const confirm = () => {
	emit("select", props.list[select.value]);
	close();
};

const selectStore = (index) => {
	select.value = index;
};


onMounted(() => {
});

defineExpose({ open, close });
</script>

<style scoped lang="less"></style>
